<template>
  <el-dialog
    title="标签管理"
    :visible.sync="$attrs.visable"
    width="700px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="labelbody" v-if="labelList.length > 0">
      <div class="w_full flex flexwrap">
        <div class="label-item mr-12 mb-10" v-for="(item,index) in labelList" :key="index">
            <el-input placeholder="请输入内容" size="small" v-model="item.tagName" style="width:200px">
            <template slot="append">
                <el-popconfirm
                  title="删除该标签，会清除所有素材上的此标签，是否确认？"
                  popper-class='popconform'
                  @confirm='handleDelete(item.id)'
                >
                  <img slot="reference" src="@/assets/images/del.png" alt="" class="labeldel" />
                </el-popconfirm>
            </template>
            </el-input>
        </div>
      </div>
    </div>
    <div class="empty-body" v-else>
      <img class="empty-cover" src="@/assets/images/empty1.png" />
      <div class="empty-text">暂无数据</div>
    </div>
  </el-dialog>
</template>

<script>
import {
  fetchMeterialTags,
  deleteMeterialTag
} from "@/api/market/material";
export default {
  data() {
    return {
      loading: false,
      labelList: [],
    };
  },
  props: {},
  mounted() {
    this.fetchMeterialTagList()
  },
  methods: {
    handleClose() {
      this.$emit("close", 5); //关闭弹窗;
    },

    // 确认
    async handleDelete(id){
        try {
          let result = await deleteMeterialTag(id)
          if(result.code === 200) {
            this.fetchMeterialTagList()
          }
        } catch (error) {
          this.$message.error("删除失败，请稍后再试");
        }
    },
    // 获取素材标签列表
    async fetchMeterialTagList() {
      try {
        let data = await fetchMeterialTags()
        if (data.code === 200) {
          this.labelList = data?.rows || []
        }
      } catch (error) {
        this.$message.error("系统异常");
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.labelbody {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;
}
.labeldel{
    width: 16px;
}
::v-deep .el-input-group__append{
    padding: 0 11px;
    border-radius: 0;
}
::v-deep .el-input__inner{
    border-radius: 0;
}
.empty-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
  padding-top: 44px;
  .empty-cover {
    width: auto;
    height: 90px;
  }
  .empty-text {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 22px;
    margin-top: 20px;
  }
}
</style>